<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>旅游网</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .padd-top{
            padding-top: 20px;
            /*应该使用padding，行盒子之间就没有间隔的，使用margin会使行盒子之间进行分离*/
        }
        .search-top{
            margin-top: 10px;
            padding-left: 20px;
        }
        .search-input{
            float: left;
            width: 350px;
            height: 35px;
            border: 2px solid #fdc101;
            padding: 10px;
        }
        .search-btn{
            float: left;
            width: 100px;
            height: 35px;
            border: 1px solid #fdc101;
            background-color: #fdc101;
            text-align: center;
            line-height: 35px;
            color: #0f0f0f;
        }
        .hr-bom{
            border-bottom: 2px solid #fdc101;
        }
        .front-red{
            font-size: 14px;
            text-align: center;
            color: red;
        }
        .foot-bg{
            height: 40px;
            font-size: 8px;
            background-color: #ffc200;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
<!--编写前面：
    1.首先进行总体的分析和划分，找到相应的响应式
    header
    div
    footer
    2.需要在从各个部分中继续进行划分
    3.注意该项目中搜索栏中的浮动
    4.提取重要的css例如该项目中padding-top
    5.相框的设置
    6.响应式的图片，宽度是根据父元素的
    -->

<!--页眉部分-->
<header class="container-fluid">
    <div class="row">
        <img src="images/top_banner.jpg" class="img-responsive">
    </div>
    <div class="row padd-top">
        <div class="col-lg-3">
            <img src="images/logo.jpg" class="img-responsive">
        </div>
        <!--搜索栏-->
        <div class="col-lg-6 search-top">
            <input type="text" placeholder="请输入线路名称" class="search-input">
            <a href="#" class="search-btn">搜 索</a>
        </div>
        <div class="col-lg-3">
            <img src="images/hotel_tel.png" class="img-responsive">
        </div>
    </div>
    <!--导航条-->
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">传智播客</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">JavaEE <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                        <li><a href="#">Android</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <!--轮播图-->
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/banner_1.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="images/banner_2.jpg" alt="...">
                </div>
                <div class="item">
                    <img src="images/banner_3.jpg" alt="...">
                </div>

            </div>

            <!-- controls 图片上的左右箭头 -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</header>

<!--主体部分-->
<div class="container">
    <!--黑马精选-->
    <div class="row padd-top hr-bom">
        <img src="images/icon_5.jpg">
        <span>黑马精选</span>
    </div>
    <div class="row padd-top">
        <div class="col-md-3 pading">
            <!--为图片设置相框，注意需要重新添加一个div，不能再父级标签上之间进行设置，直接设置导致图片贴近-->
            <div class="img-thumbnail">
                <img src="images/jiangxuan_3.jpg" class="img-responsive">
                <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                <p class="front-red">￥888</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="img-thumbnail">
                <img src="images/jiangxuan_3.jpg" class="img-responsive">
                <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                <p class="front-red">￥888</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="img-thumbnail">
                <img src="images/jiangxuan_3.jpg" class="img-responsive">
                <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                <p class="front-red">￥888</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="img-thumbnail">
                <img src="images/jiangxuan_3.jpg" class="img-responsive">
                <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                <p class="front-red">￥888</p>
            </div>
        </div>
    </div>
    <!--国内游-->
    <div class="row padd-top hr-bom">
        <img src="images/icon_6.jpg">
        <span>国内游</span>
    </div>
    <div class="row padd-top">
        <div class="col-lg-4">
            <img src="images/guonei_1.jpg">
        </div>
        <div class="col-lg-8">
            <div class="row">
                <!--这里有栅格系统的嵌套，在剩余的8个栅格进行划分还是需要划分12栅格-->
                <div class="col-lg-4   pading">
                    <div class="img-thumbnail">
                        <img src="images/jiangxuan_2.jpg" class="img-responsive">
                        <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                        <p class="front-red">￥888</p>
                    </div>

                </div>
                <div class="col-lg-4 pading">
                    <div class="img-thumbnail">
                        <img src="images/jiangxuan_2.jpg" class="img-responsive">
                        <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                        <p class="front-red">￥888</p>
                    </div>
                </div>
                <div class="col-lg-4 pading">
                    <div class="img-thumbnail">
                        <img src="images/jiangxuan_2.jpg" class="img-responsive">
                        <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                        <p class="front-red">￥888</p>
                    </div>
                </div>
            </div>
            <div class="row padd-top">
                <div class="col-lg-4 pading">
                    <div class="img-thumbnail">
                        <img src="images/jiangxuan_2.jpg" class="img-responsive">
                        <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                        <p class="front-red">￥888</p>
                    </div>
                </div>
                <div class="col-lg-4 pading">
                    <div class="img-thumbnail">
                        <img src="images/jiangxuan_2.jpg" class="img-responsive">
                        <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                        <p class="front-red">￥888</p>
                    </div>
                </div>
                <div class="col-lg-4 pading">
                    <div class="img-thumbnail">
                        <img src="images/jiangxuan_2.jpg" class="img-responsive">
                        <span>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店人选+接送机）</span>
                        <p class="front-red">￥888</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--页脚部分-->
<footer class="container-fluid">
    <div class="row">
       <img src="images/footer_service.png" class="img-responsive">
    </div>
    <div class="row foot-bg">
        <span>柴和程  版权所有@2022-3-15</span>
    </div>
</footer>
</body>
</html>